<template>
  <div class="space-menu">
    <tiny-tree-menu
      ref="tree"
      :data="treeDataFilter"
      :show-filter="false"
      node-key="id"
      wrap
      :default-expanded-keys="[expandeArr]"
      @current-change="currentChange"
    >
      <template #default="slotScope">
        <template v-for="(item, index) in routerTitle" :key="index">
          <span v-if="slotScope.label === item.value" class="menu-title">
            <component :is="item.icon"></component>
            <span :class="item.bold">{{ $t(item.name) }}</span>
          </span>
        </template>
      </template>
    </tiny-tree-menu>
  </div>
</template>

<script lang="ts" setup>
  import { computed, watch, ref } from 'vue';
  import { RouteRecordNormalized } from 'vue-router';
  import {iconApp, iconCustom, iconText, iconTotal,
    IconPlus,
    IconDownloadCloud,
    IconFiles,
    IconSetting,
    IconSuccessful,
    IconCueL,
    IconUser,
    IconFiletext,
    IconApplication,
  } from '@opentiny/vue-icon';
  import { TreeMenu as tinyTreeMenu, TabItem } from '@opentiny/vue';
  import router from '@/router';
  import { useUserStore } from '@/store';

  // icon图标
  const iconDownloadCloud = IconDownloadCloud();
  const iconFiles = IconFiles();
  const iconSetting = IconSetting();
  const iconSuccessful = IconSuccessful();
  const iconCueL = IconCueL();
  const iconUser = IconUser();
  const iconFiletext = IconFiletext();
  const iconApplication = IconApplication();
  const tree = ref();
  const expandeArr = ref();
  const routerTitle = [
    {
      value: 'Space',
      name: 'menu.space',
      icon: iconApplication,
      bold: 'main-title',
    },
    {
      value: 'Team',
      name: 'menu.team',
      // icon: iconApplication,
      bold: 'main-title',
    },
    {
      value: 'Book',
      name: 'menu.book',
      // icon: iconApplication,
      bold: 'main-title',
    },
    {
      value: 'Board',
      name: 'menu.board',
      icon: iconApplication,
      bold: 'main-title',
    },
    {
      value: 'Home',
      name: 'menu.home',
      icon: null,
      bold: 'title',
    },{
      value: 'Organization',
      name: 'menu.organization',
      icon: null,
      bold: 'title',
    },
    {
      value: 'Work',
      name: 'menu.work',
      icon: null,
      bold: 'title',
    },
    {
      value: 'List',
      name: 'menu.list',
      icon: iconFiles,
      bold: 'main-title',
    },
    {
      value: 'Table',
      name: 'menu.list.searchTable',
      icon: null,
      bold: 'title',
    },
    {
      value: 'Form',
      name: 'menu.form',
      icon: iconSetting,
      bold: 'main-title',
    },
    {
      value: 'Base',
      name: 'menu.form.base',
      icon: null,
      bold: 'title',
    },
    {
      value: 'Step',
      name: 'menu.form.step',
      icon: null,
      bold: 'title',
    },
    {
      value: 'Profile',
      name: 'menu.profile',
      icon: iconFiletext,
      bold: 'main-title',
    },
    {
      value: 'Detail',
      name: 'menu.profile.detail',
      icon: null,
      bold: 'title',
    },
    {
      value: 'Result',
      name: 'menu.result',
      icon: iconSuccessful,
      bold: 'main-title',
    },
    {
      value: 'Success',
      name: 'menu.result.success',
      icon: null,
      bold: 'title',
    },
    {
      value: 'Error',
      name: 'menu.result.error',
      icon: null,
      bold: 'title',
    },
    {
      value: 'Cloud',
      name: 'menu.cloud',
      icon: iconDownloadCloud,
      bold: 'main-title',
    },
    {
      value: 'Hello',
      name: 'menu.cloud.hello',
      icon: null,
      bold: 'title',
    },
    {
      value: 'Contracts',
      name: 'menu.cloud.contracts',
      icon: null,
      bold: 'title',
    },
    {
      value: 'Exception',
      name: 'menu.exception',
      icon: iconCueL,
      bold: 'main-title',
    },
    {
      value: '403',
      name: 'menu.exception.403',
      icon: null,
      bold: 'title',
    },
    {
      value: '404',
      name: 'menu.exception.404',
      icon: null,
      bold: 'title',
    },
    {
      value: '500',
      name: 'menu.exception.500',
      icon: null,
      bold: 'title',
    },
    {
      value: 'User',
      name: 'menu.user',
      icon: iconUser,
      bold: 'main-title',
    },
    {
      value: 'Info',
      name: 'menu.user.info',
      icon: null,
      bold: 'title',
    },
    {
      value: 'Setting',
      name: 'menu.user.setting',
      icon: null,
      bold: 'title',
    },
  ];

  // 获取路由数据
  const appRoute = computed(() => {
    return router
      .getRoutes()
      .find((el) => el.name === 'root') as RouteRecordNormalized;
  });
  const copyRouter = JSON.parse(JSON.stringify(appRoute.value.children));
  copyRouter.sort((a: RouteRecordNormalized, b: RouteRecordNormalized) => {
    return (a.meta.order || 0) - (b.meta.order || 0);
  });

  const userStore = useUserStore();
  const role = computed(() => userStore.role);
  let treeData = ref(copyRouter);
  const treeDataForEach = (arr: any[]) => {
    return arr.filter((e: { children: any[]; meta: { hideInMenu: any } }) => {
      if (e.children) {
        e.children = e.children.filter((v: { meta: { hideInMenu: any } }) => {
          return !v.meta.hideInMenu;
        });
        treeDataForEach(e.children);
      }
      return !e.meta.hideInMenu;
    });
  };
  const treeDataFilter = treeDataForEach(treeData.value);

  watch(
    role,
    (newValue, oldValue) => {
      if (newValue === 'admin') {
        treeData.value = copyRouter;
      } else {
        treeData.value = copyRouter.filter(
          (item: { name: string }) => item.name !== 'User'
        );
      }
    },
    { immediate: true }
  );

/**
 * 监听路由变化高亮当前菜单
 */
watch(
  () => router.currentRoute.value.path,
  (newValue) => {
    let data = newValue.split('/');
    let result = data[data.length - 1];
    const characters = [...result];
    characters[0] = characters[0]?.toUpperCase();
    expandeArr.value = characters.join('');
    setTimeout(() => {
      tree.value.setCurrentNode({ id: expandeArr.value });
    }, 0);
  },
  { immediate: true }
);

const currentChange = (data: any) => {
  const filter = [
    'Space',
    'Exception',
    'Form',
    'Board',
    'List',
    'Profile',
    'Result',
    'User',
    'Cloud',
  ];
  if (filter.indexOf(data.id) === -1) {
    router.push({ name: data.id });
  }
};
</script>

<style lang="less" scoped>
// @import "../../assets/style/menu.less";
// 菜单宽度
.space-menu:deep(.tiny-tree-menu) {
  width: 250px;
}

// 去除默认右边竖线
.space-menu:deep(.tiny-tree-menu::before) {
  border-right: none;
}

// 增加子菜单上下间距
.space-menu:deep(.tiny-tree-menu .tiny-tree > div) {
  margin: 3px 0;
}

// 解决切换闪动
.space-menu:deep(.tiny-tree-menu .tiny-tree .tree-node-name) {
  border-left: 2px solid transparent !important;
}

// 主标题点击后显示背景色
.space-menu:deep(
    .tiny-tree-menu
      .tiny-tree
      .tiny-tree-node.is-current
      > .tiny-tree-node__content
      .tree-node-name
      .tiny-svg
  ) {
    fill: var(--ti-tree-menu-node-current-color);
}
.space-menu:deep(.tiny-collapse-item__header) {
  background-color: var(--ti-common-color-bg-light-normal);
  color: var(--ti-common-color-text-highlight);
}

// 路由子菜单选中后的样式
.space-menu:deep(.tiny-tree-node__children .tiny-tree-node__content) {
  .tree-node-name {
    margin-left: 28px !important;
    padding-left: 6px !important;
  }
}
.space-menu:deep(.tiny-tree-node__children > .tree-node-body) {
padding-left: 50px;
}
.main-title {
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  color: #000;
}

.title {
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}

.menu-title {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 20px;

  > svg {
    width: 1.3em;
    height: 1.3em;
  }
}

:deep(.tiny-tree-node__wrapper > .is-current > .tiny-tree-node__content) {
  color: #000 !important;
  background: none !important;
  margin-left: 0 !important;
  &:hover {
    background: #fff !important;
    color: #fff !important;
  }
}

:deep(.tiny-tree-node__wrapper > .is-expanded >  .tiny-tree-node__children
> .tiny-tree-node__wrapper > .is-current > .tiny-tree-node__content
) {
  background-color: var(--ti-tree-menu-node-hover-bg-color) !important;
  margin-left: 0 !important;
  &:hover {
    background: var(--ti-tree-menu-node-hover-bg-color) !important;
  }
}

:deep(.tiny-tree-node__wrapper > .is-expanded > .tiny-tree-node__children
.tiny-tree-node__wrapper .is-current .tiny-tree-node__content .tree-node-name) {
  border-left: 2px solid var(--ti-tree-menu-square-left-border-color, '#fff') !important;
}

:deep(.tiny-tree-node__wrapper > .is-expanded > .tiny-tree-node__children
.tiny-tree-node__wrapper .is-current .tiny-tree-node__content .tiny-tree-node__content-right) {
  background-color: var(--ti-tree-menu-node-hover-bg-color) !important;
}

:deep(.tiny-tree-node__wrapper > .is-expanded > .tiny-tree-node__children
.tiny-tree-node__wrapper .is-current .tiny-tree-node__content .tiny-tree-node__content-left
.tiny-tree-node__content-box) {
  background-color: var(--ti-tree-menu-node-hover-bg-color) !important;
}

:deep(.tiny-tree-node__wrapper > .is-expanded > .tiny-tree-node__children
.tiny-tree-node__wrapper .is-current .tiny-tree-node__content .tiny-tree-node__content-left
.tiny-tree-node__content-box:before) {
  display: none !important;
}

:deep(.tiny-tree-node__wrapper > .is-expanded > .tiny-tree-node__children
.tiny-tree-node__wrapper .is-current .tiny-tree-node__content .tiny-tree-node__content-left:before) {
  display: none !important;
}

:deep(.tiny-tree-node__wrapper > .is-current > .tiny-tree-node__content) {
  background-color: #fff !important;
}

:deep(.tiny-tree-node__wrapper > .is-current > .tiny-tree-node__content .tiny-tree-node__content-box) {
  background-color: #fff !important;
}

:deep(.tiny-tree-node__content:hover) {
  background-color: var(--ti-tree-node-content-hover-bg-color) !important;
}

:deep(.tiny-tree-menu__wrap > .tiny-tree-node__wrapper > .is-root > .tiny-tree-node__content
> .tiny-tree-node__content-left .tiny-tree-node__content-box .tree-node-name) {
  padding: 0 8px !important;
}

:deep(.tiny-tree-node > .tiny-tree-node__content) {
  margin-left: 0 !important;
}

.tiny-tree-menu
  .tiny-tree
  .tiny-tree-node.is-current
  > .tiny-tree-node__content
  .tree-node-name
  .tiny-svg {
  fill: var(--ti-base-icon-color);
}
</style>
